<template>
    <div class="dashboard-container" id="order-app" v-loading="loading">
        <div class="container">
            <!-- 搜索项 -->
            <div class="tableBar">
                <el-input placeholder="请输入订单号" style="width: 250px" v-model="input">
                    <i @click="init" class="el-input__icon el-icon-search" slot="prefix" style="cursor: pointer"></i>
                </el-input>
                <el-date-picker :default-time="['00:00:00', '23:59:59']" clearable end-placeholder="结束日期"
                    placeholder="选择日期" range-separator="至" start-placeholder="开始日期"
                    style="width: 400px;margin-left: 20px;" type="datetimerange" v-model="orderTime"
                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                <el-button @click="init" class="search-btn" type="primary">查询</el-button>
            </div>
            <el-table :data="tableData" class="tableBox" stripe>
                <el-table-column label="订单号" min-width="110" prop="number"></el-table-column>
                <el-table-column label="订单状态" prop="订单状态">
                    <template slot-scope="{ row }">
                        <span>{{ getOrderType(row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户" prop="consignee"></el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column label="地址" prop="address" show-overflow-tooltip></el-table-column>
                <el-table-column label="下单时间" min-width="100" prop="orderTime"></el-table-column>
                <el-table-column label="实收金额" prop="amount">
                    <template slot-scope="{ row }">
                        <span>￥{{ row.amount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="btn">
                    <template slot-scope="{ row }">
                        <el-button @click="goDetail(row)" class="blueBug" type="text">
                            查看
                        </el-button>
                        <el-divider direction="vertical" v-if="row.status === 2"></el-divider>
                        <el-button @click="cancelOrDeliveryOrComplete(3, row.id)" class="blueBug" type="text"
                            v-if="row.status === 2">
                            派送
                        </el-button>
                        <el-divider direction="vertical" v-if="row.status === 3"></el-divider>
                        <el-button @click="cancelOrDeliveryOrComplete(4, row.id)" class="blueBug" type="text"
                            v-if="row.status === 3">
                            完成
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :total="counts" @current-change="handleCurrentChange" @size-change="handleSizeChange" class="pageList"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>

        <!-- 查看弹框部分 -->
        <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" title="订单信息" width="30%">
            <div class="info-box">
                <div class="item-box">
                    <span class="label">订单号：</span>
                    <span class="des">{{ diaForm.number }}</span>
                </div>
                <div class="item-box">
                    <span class="label">订单状态：</span>
                    <span class="des">{{ getOrderType(diaForm) }}</span>
                </div>
                <div class="item-box">
                    <span class="label">收货人：</span>
                    <span class="des">{{ diaForm.consignee }}</span>
                </div>
                <div class="item-box">
                    <span class="label">联系电话：</span>
                    <span class="des">{{ diaForm.phone }}</span>
                </div>
                <div class="item-box">
                    <span class="label">地址：</span>
                    <span class="des">{{ diaForm.address }}</span>
                </div>
                <div class="item-box">
                    <span class="label">支付金额：</span>
                    <span class="des">{{ diaForm.amount }}</span>
                </div>
                <div class="item-box">
                    <span class="label">下单时间：</span>
                    <span class="des">{{ diaForm.orderTime }}</span>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { getOrderDetailPage, editOrderDetail } from '@/api/order'

export default {
    name: 'order',
    data() {
        return {
            input: '',
            orderTime: '',
            beginTime: '',
            endTime: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            dialogVisible: false,
            diaForm: {},
            loading: false
        }
    },
    computed: {},
    watch: {
        orderTime(val) {
            if (val && val.length >= 2) {
                this.beginTime = val[0]
                this.endTime = val[1]
            } else {
                this.beginTime = ''
                this.endTime = ''
            }
        }
    },
    created() {
        this.init()
    },
    mounted() {
        // this.loading = false
    },
    methods: {
        async init() {
            getOrderDetailPage({
                page: this.page,
                pageSize: this.pageSize,
                number: this.input || undefined,
                beginTime: this.beginTime || undefined,
                endTime: this.endTime || undefined
            }).then(res => {
                if (String(res.code) === '1') {
                    this.tableData = res.data.records || []
                    this.counts = res.data.total
                }
            }).catch(err => {
                this.$message.error('请求出错了：' + err)
            })
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
        getOrderType(row) {
            let str = ''
            switch (row.status) {
                case 1:
                    str = '待付款'
                    break;
                case 2:
                    str = '正在派送'
                    break;
                case 3:
                    str = '已派送'
                    break;
                case 4:
                    str = '已完成'
                    break;
                case 5:
                    str = '已取消'
                    break;

            }
            return str
        },
        // 查看详情
        goDetail(row) {
            this.diaForm = {}
            this.dialogVisible = true
            this.diaForm = { ...row }
        },
        // 取消，派送，完成
        cancelOrDeliveryOrComplete(status, id) {
            this.$confirm('确认更改该订单状态?', '提示', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
            }).then(() => {
                editOrderDetail(params).then(res => {
                    if (res.code === 1) {
                        this.$message.success(status === 3 ? '订单已派送' : '订单已完成')
                        this.init()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
            const params = {
                status,
                id
            }
        },
        handleClose() {
            this.dialogVisible = false
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.page = val
            this.init()
        }
    }
};
</script>

<style lang="css" scoped>
@import '@/assets/css/common.css';
@import '@/assets/css/page.css';

.search-btn {
    margin-left: 20px;
}

.tableBar {
    justify-content: flex-start !important;
}

.info-box {
    margin: -15px -44px 20px;
}

.info-box .item-box {
    display: flex;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    text-align: left;
    margin-bottom: 14px;
}

.info-box .item-box:last-child {
    margin-bottom: 0;
}

.info-box .item-box .label {
    width: 96px;
}

.info-box .item-box .des {
    flex: 1;
    color: #333333;
}
</style>
